.root {
  flex-grow: 1;

  @container (max-width: theme('screens.md')) {
    height: 100%;
    flex-grow: 1;
  }
}

.wrapper {
  @container (max-width: theme('screens.md')) {
    height: 100%;
  }
}

.input {
  border-radius: 0 !important;

  @container (max-width: theme('screens.md')) {
    height: 100%;
  }
}

.dropdown {
  @container (max-width: theme('screens.sm')) {
    margin-top: -7px;
  }
}

.targetSelectorDropdown { 
  min-width: 120px;
}


.targetSelectorRoot {
  width: 130px;
  font-size: var(--mantine-font-size-xs);
  overflow: hidden;

  @container (max-width: theme('screens.md')) {
    display: none; // TODO.search: Remove this once we figure out a way to prevent hiding the whole bar when selecting a target
    height: 100%;

    &,
    &>[role="combobox"],
    &>[role="combobox"] * {
      height: 100%;
    }
  }

  @container (max-width: theme('screens.sm')) {
    width: 25%;
  }
}

.targetSelectorOption { 
  word-break: break-word;
  padding-left: var(--mantine-spacing-xs);
  padding-right: var(--mantine-spacing-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.targetSelectorOptions {
  overflow: hidden;

  > div {
    overflow-x: hidden !important;
  }
}

.targetSelectorInput {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: light-dark(
    var(--mantine-color-gray-3),
    var(--mantine-color-gray-8)
  );
  padding-right: 18px;

  &:not(:focus) {
    border-right-style: none;
  }

  @container (max-width: theme('screens.md')) {
    height: 100%;
  }
}

.targetSelectorRightSection {
  pointer-events: none;
}

.searchButton {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-color: light-dark(
    var(--mantine-color-gray-4),
    var(--mantine-color-dark-4)
  ) !important;
  border-left: none !important;
  background-color: light-dark(
    var(--mantine-color-gray-3),
    var(--mantine-color-gray-8)
  ) !important;
  color: light-dark(
    var(--mantine-color-black),
    var(--mantine-color-white)
  );

  &:hover {
    background-color: light-dark(
      var(--mantine-color-gray-4),
      var(--mantine-color-gray-7)
    ) !important;
  }

  @container (max-width: theme('screens.md')) {
    display: none;
  }
}
